<template>
    <div class="gzg-search">
        <el-form :label-width="labelWidth">
            <el-row :gutter="10">
                <template v-for="(item, index) in config" :key="index">
                    <template v-if="isCollapse === false">
                        <el-col :span="item.span || 6" v-if="num > index">
                            <el-form-item :label="item.label">
                                <search-item :config="item" v-model="searchForm[item.id]"></search-item>
                            </el-form-item>
                        </el-col>
                    </template>
                    <el-col :span="item.span || 6" v-else>
                        <el-form-item :label="item.label">
                            <search-item :config="item" v-model="searchForm[item.id]"></search-item>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :span="6" :offset="offset" style="text-align:right;margin-bottom:16px">
                    <el-button class="link" type="text" v-if="showMore" @click="isCollapse = !isCollapse"  :icon="isCollapse ? ArrowUp : ArrowDown">{{isCollapse ? '收起' : '展开'}}</el-button>
                    <el-button class="btn" size="small" @click="reset">重置</el-button>
                    <el-button class="btn" type="primary" size="small" @click="search">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, toRefs , onMounted } from 'vue'
import { ArrowUp,ArrowDown } from '@element-plus/icons-vue'

import searchItem from './gzg-search-item'

import type { searchConfig } from './model/index'

import systemStore from '@/store/modules/system'

const emit = defineEmits(['search'])

const props = defineProps<{
    config: searchConfig[],
    form: Record<string, any>,
    showMore: boolean,
    labelWidth: number | string
}>();

const isCollapse = ref(false)
const num = ref(18)

const searchForm = ref<any>({})

const search = () => {
    emit('search', {...searchForm.value})
}

const reset = () => {
   emit('search', {...props.form})
}

const dict = computed(() => {
    return systemStore().dict
})

watch(() => props.form, (val) => {
    let obj = JSON.parse(JSON.stringify(val))
    searchForm.value =  obj
}, {
    immediate:true
})

const offset = computed(() => {
    let val = 0
    let total = 0
    let { config } = props
    
    if (isCollapse.value === false) {
        for(let i = 0; i < config.length; i++) {
            total += (config[i].span || 6)
            if (total >= 24) {
                num.value = i
                val =  24 - (total - (config[i].span || 6)) - 6
                break;
            } else {
                val = 24 - 6 - total
            }
        }
    } else {
        for(let i = 0; i < config.length; i++) {
            total += (config[i].span || 6)
        }
        let rem = total % 24
        if (rem <= 18) {
            val =  rem == 0 ? 18 : 18 - rem 
        } else {
            val = 18
        }
    }

    return val
})

</script>
<style lang="scss" scoped>
.gzg-search{
    background: #FAFAFA;
    border-radius: 8px;
    width: 100%;
    padding: 16px;
    padding-bottom: 0px;
    box-sizing: border-box;
    margin-bottom: 24px;

    .link{
        font-size:14px;
        color:#2770EE;
        width: 82px;
        height: 32px;
    }

    .btn{
        width: 60px;
        font-size: 14px;
        height: 32px;
    }

    .el-form-item__label{
        color: #303133;
    }
}
</style>